<template>
  <div class="pIndex flex">
    <MenuBar />
    <!-- 群相册云服务 -->
    <div class="cloudServer flex-column">
      <div class="title flex-none">群相册云服务</div>
      <div class="flex1 of-y p-r" ref="albumScroll">
        <t-list>
          <t-list-item :id="item.groupId" :class="{ active: nowAlbum.groupId === item.groupId }"
            @click="albumClick(item)" v-for="(item) in albumList" :key="item.groupId">
            <div class="flex">
              <t-image loading="" :src="item.coverPictureFileUrl" :style="{ width: '52px', height: '52px' }" fit="cover"
                shape="round" class="mr-20 flex-none">
                <template #error>
                  <img :src="defaultImg" alt="">
                </template>
              </t-image>
              <div class="text-line-2 fs-18 c-6 itemName b">
                {{ item.name || item.creatorName || '--' }}
              </div>
            </div>
          </t-list-item>
        </t-list>
      </div>
    </div>
    <!-- 照片集 -->
    <div class="flex1 mainAlbum flex-column of-h">
      <div class="flex-space-between flex-none ml-20 pt-20 pb-20">
        <div class="flex-middle">
          <div :class="{ 'c-success': isAlbumDetail }" @click="isAlbumDetailSet(false)" class="fs-22 flex-none b">
            照片集<span v-show="!isAlbumDetail">（{{
              nowAlbumLength }}）</span>
          </div>
          <template v-if="isAlbumDetail">
            <div class="fs-22 pl-5 pr-5"> > </div>
            <div class="fs-22 b">
              {{ nowFolder?.subfolderName || '' }}
            </div>
          </template>
        </div>
        <t-button theme="primary" shape="round" class="mr-20" @click="toUpload">
          <template #icon><add-icon /></template>
          上传
        </t-button>
      </div>
      <t-list class="ml-20 pb-20  flex1 of-y" :on-scroll="listScroll">
        <t-row :gutter="[20, 24]" class="mr-0">
          <template v-if="!isAlbumDetail">
            <t-col @click="newFolder" flex="200px" class="">
              <div class="addAlbum flex-center">
                <add-icon class="fs-40" style="color:#A6A5A5;" />
              </div>
              <div class="fs-18 albumInfo">新建照片集</div>
            </t-col>
            <t-col @click="folderClick(item)" v-for="(item) in folderList" :key="item._id" flex="200px">
              <t-image class="addAlbum" loading="" :src="item.coverPictureFileUrl" fit="cover" shape="round">
                <template #error>
                  <img :src="defaultImg" alt="">
                </template>
              </t-image>
              <div class="albumInfo">
                <div class="fs-18">
                  {{ item.subfolderName || '--' }}
                </div>
                <div class="c-6 fs-16 mt-5">
                  {{ item.count || 0 }}张
                </div>
              </div>
            </t-col>
          </template>
          <template v-if="isAlbumDetail">
            <t-col @click="previewTips" v-for="(item) in mediaList" :key="item._id" flex="200px">
              <div class="imgItem">
                <t-image class="addAlbum" loading="" :src="item.tempFileURL" fit="cover" shape="round">
                  <template #error>
                    <img :src="defaultImg" alt="">
                  </template>
                </t-image>
                <img v-if="item.fileType" class="playIcon" src="../../assets/play.png" alt="">
              </div>
            </t-col>
            <t-col class="ta-c mt-60" :span="6" :offset="2">
              <t-loading text="加载中..." :indicator="true" v-if="hasMore" />
            </t-col>
            <t-col class="ta-c mt-60" :span="6" :offset="3" v-if="!hasMore && !mediaList.length">
              <img src="../../assets/empty.png" alt="">
              <div class="fs-18 c-6">还没照片哦，赶快上传吧！</div>
            </t-col>
          </template>
        </t-row>
      </t-list>
    </div>
  </div>
  <t-dialog header="请移步小程序新建" :cancel-btn="null" body="网页端新建照片集开发中，请移步群相册云服务小程序新建" :visible="showTips"
    :on-close="hideShowTips" :on-confirm="hideShowTips" />
</template>

<script setup>
import { computed, ref, onMounted, watch } from 'vue'
import MenuBar from './components/MenuBar/index.vue'
import { AddIcon } from 'tdesign-icons-vue-next'
import useAlbumStore from './store/index'
import { storeToRefs } from 'pinia'
import { toPage } from '@/router'
import { MessagePlugin } from 'tdesign-vue-next';
import { debounce, getUrlParamObj } from 'lj-utils'
import defaultImg from '@/assets/default.png'
import { useScroll } from '@vueuse/core'

const albumScroll = ref(null)
const { _x, y, isScrolling } = useScroll(albumScroll, { behavior: 'smooth' })
const albumStore = useAlbumStore()
const { getAllAlbumGroup, setNowAlbum, setNowFolder, getFolderDetail } = albumStore
const { showTipsWatch, albumList, folderList, nowAlbum, nowFolder, mediaList, nowMediaPage, hasMore } = storeToRefs(albumStore)

const showTips = ref(false)
const isAlbumDetail = ref(false)
const nowAlbumLength = computed(() => {
  return folderList.value?.length || 0
})
watch(showTipsWatch, (v) => {
  if (v) {
    showTipsSet(true)
  }
})

function checkListBottom(e) {
  if (e.scrollBottom < 200 && hasMore.value) {
    nowMediaPage.value && getFolderDetail(nowMediaPage.value)
  }
}
const dbFn = debounce(checkListBottom, 300)
function listScroll(e) {
  dbFn(e)
}
function albumClick(item) {
  setNowAlbum(item)
  isAlbumDetail.value = false
}
function newFolder() {
  showTipsSet(true)
}
function showTipsSet(v) {
  showTips.value = v
}
function hideShowTips() {
  showTipsSet(false)
}
function toUpload() {
  toPage({ path: '/upload', query: { groupId: nowAlbum.value?.groupId, folderId: nowFolder.value?._id } })
}
function folderClick(item) {
  isAlbumDetail.value = true
  setNowFolder(item)
}
function isAlbumDetailSet(v) {
  isAlbumDetail.value = v
}
function previewTips() {
  MessagePlugin.warning({
    content: '暂不支持预览',
    duration: 1500,
  });
}
const init = async () => {
  const paramsObj = getUrlParamObj()
  if (paramsObj.folderId) {
    isAlbumDetail.value = true
  }
  await getAllAlbumGroup()
  y.value = document.querySelector('#' + nowAlbum.value.groupId)?.offsetTop || 0
  return
}
onMounted(() => {
})
init()
</script>

<style lang="scss">
.pIndex {
  position: relative;

  .cloudServer {
    width: 250px;
    background-color: #f7f7f7;
    overflow: hidden;
    height: 100vh;
    --td-bg-color-container: #f7f7f7;
  }

  .title {
    padding: 25px 0 25px 20px;
    font-size: 22px;
    font-weight: bold;
  }

  .mainAlbum {
    background-color: #fff;
    height: 100vh;
  }

  .active {
    background-color: #fff;

    .itemName {
      color: #3F5EFF;
      font-weight: bold;
    }
  }

  .addAlbum {
    width: 200px;
    height: 200px;
    border-radius: 6px;
    background-color: #E6E6E6;
  }

  .albumInfo {
    margin-top: 10px;
    min-height: 50px;
  }

  .imgItem {
    position: relative;

    .playIcon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      z-index: 2;
    }
  }
}
</style>
